<!-- DrawerFooter.vue -->
<template>
  <div class="drawer-footer">
    <button class="clear-btn" @click="$emit('clear')">清空</button>
    <button class="ai-btn" @click="showDialog" :loading="gptStore.loading">获取AI建议</button>

    <AISuggestionDialog 
      v-model:visible="dialogVisible" 
      :spot-ids="spotIds" 
      :spots="spots" 
      @submit="handleAISubmit" 
      ref="dialogRef" 
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import AISuggestionDialog from '../../ai/AIAnalyse/AISuggestionDialog.vue'
import { useGptStore } from '@/stores/GptStore'
import { spotAnalysis } from '@/api/Gpt'

const props = defineProps<{
  spots: {
    attractionId: number
    name: string
    description: string
    duration?: number
    aiSuggestion?: string
  }[]
}>()

const emit = defineEmits(['clear', 'submit-analysis'])

const gptStore = useGptStore()
const dialogVisible = ref(false)
const dialogRef = ref()

const spotIds = computed(() => props.spots.map(spot => spot.attractionId))

const showDialog = () => {
  if (!props.spots.length) {
    ElMessage.warning('请先添加景点')
    return
  }
  dialogVisible.value = true
}

const handleAISubmit = async (data: any) => {
  emit('submit-analysis', data)
}

defineEmits(['clear'])
</script>